<template>
  <div id="app">
    <div>count: {{ $store.state.count }}</div>
    <div>doubleCount: {{ $store.getters.doubleCount }}</div>
    <div>doubleCount: {{ $store.getters.doubleCount }}</div>
    <div>doubleCount: {{ $store.getters.doubleCount }}</div>
    <div>doubleCount: {{ $store.getters.doubleCount }}</div>
    <div>doubleCount: {{ $store.getters.doubleCount }}</div>
    <div>
      <button @click="$store.commit('addCount', 10)">addCount</button>
    </div>
    <div>
      <button @click="$store.dispatch('addCountAsync')">addCountAsync</button>
    </div>
  </div>
</template>
<script>
// *.vue 文件是 Vue 脚手架指定的组件类型文件
// 在 *.vue 文件的 script 标签中可以写 js 代码
// 在 script 标签中 只需要导出组件实例的配置选项即可
// 因为 VueCli 脚手架在启动项目的时候，会扫描项目中所有的 *.vue 文件
// 拿到 *.vue 文件中 script 标签里面导出的那个配置选项，自动帮我们 new Vue实例
export default {
  name: 'App',
  data() {
    return {
      msg: 'hehe',
      _msg: 'heheda',
      $msg: 'heheda',
    }
  },
  created() {
    console.log('this.msg', this.msg)
    console.log('this._msg', this._msg)
    console.log('this.$msg', this.$msg)
  }
}
</script>
